import { ref } from 'vue'

/**
 * 使用自定义输入钩子，管理输入框的状态和行为
 * 
 * 该钩子不接受参数。
 * 
 * @return {Object} 返回一个包含以下属性的对象：
 *  - inputValue: {Ref<String>} 输入框的值
 *  - isFocus: {Ref<Boolean>} 输入框是否聚焦
 *  - showPassword: {Ref<Boolean>} 是否显示密码
 *  - cursorPosition: {Ref<number>} 光标位置
 *  - handleFocus: {Function} 输入框聚焦时的处理函数
 *  - changePasswordShow: {Function} 切换显示密码的函数
 *  - handleBlur: {Function} 输入框失焦时的处理函数
 */
const useInputHook = () => {
	const inputValue = ref("") // 输入框的初始值为空字符串
	const isFocus = ref(false) // 初始状态为未聚焦
	const showPassword = ref(true) // 初始状态为显示密码
	const cursorPosition = ref(1) // 光标初始位置为第1个字符位置

	/**
	 * 切换显示密码的状态，并在切换后设置输入框为非聚焦状态，
	 * 之后延迟设置输入框为聚焦状态并调整光标位置到当前输入长度处。
	 */
	const changePasswordShow = () => {
		showPassword.value = !showPassword.value
		isFocus.value = false;
		setTimeout(() => {
			isFocus.value = true
			cursorPosition.value = inputValue.value.length
		})
	}

	/**
	 * 处理输入框聚焦事件，将聚焦状态设置为true。
	 */
	const handleFocus = () => {
		isFocus.value = true;
	}

	/**
	 * 处理输入框失焦事件，将聚焦状态设置为false。
	 */
	const handleBlur = () => {
		isFocus.value = false
	}
	return {
		inputValue,
		isFocus,
		showPassword,
		cursorPosition,
		handleFocus,
		changePasswordShow,
		handleBlur
	}
}

export default useInputHook;